<template>

    <el-container class="home_container">
        <el-header :style="{backgroundColor:color}">
            <div>
                <img src="../../assets/images/avatar.jpg" alt="logo">
                <span>后台管理系统</span>
            </div>


            <el-dropdown>
                  <span class="el-dropdown-link">
                      <img src="../../assets/user.gif" alt="用户头像">
                  </span>
                <span style="color: #fff">超级管理员</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="personDialog=true"><i class="iconfont iconwode"></i>个人信息
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="dialogVisible=true"><i class="iconfont iconzuopin"></i>切换主题色
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="logout()"><i class="iconfont iconpoweroff"></i>退出系统
                    </el-dropdown-item>

                </el-dropdown-menu>

            </el-dropdown>

        </el-header>
        <el-container>
            <!--侧边栏-->
            <el-aside :width="isCollapse?'64px':'200px'">
                <!--折叠区域-->
                <div class="toggle-button" @click="toggleCollapse">
                    <el-tooltip class="item" effect="dark" content="折叠菜单" placement="top">
                        <i class="iconfont icongengduo"></i>
                    </el-tooltip>
                </div>
                <!--菜单区域-->
                <el-menu
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false"
                        :router="true">

                    <div style="color: #fff;font-size: 14px;cursor: pointer;margin-left: 23px;margin-top: 12px;margin-bottom: 15px">
                        <i class="iconfont iconshouye" style="margin-right: 10px;font-size: 13px"></i>
                        <span @click="goHome()" v-show="showIndex">首页</span>
                    </div>

                    <!--一级菜单-->
                    <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
                        <template slot="title">
                            <i :class="iconsObj[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>

                        <!--二级菜单-->
                        <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>

        <!--颜色选取对话框-->
        <el-dialog
                title="切换主题色"
                :visible.sync="dialogVisible"
                width="20%">
            <div style="text-align:center">
                <el-color-picker v-model="color"></el-color-picker>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
             </span>
        </el-dialog>


        <!--个人信息对话框-->
        <el-dialog
                title="个人信息"
                :visible.sync="personDialog"
                width="50%">

            <!-- 内容主体 -->
            <el-form
                    label-width="100px">
                <el-form-item label="用户名">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input></el-input>
                </el-form-item>

                <el-form-item label="头像">
                    <el-upload
                            drag
                            :action="uploadURL"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :headers="headerObj"
                            list-type="picture"
                            :on-success="handleSuccess"
                            multiple>

                        <svg class="font-icon" aria-hidden="true" style="width: 50px;height: 40px;padding-top: 50px">
                            <use xlink:href="#iconshangchuan-"></use>
                        </svg>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="personDialog = false">取 消</el-button>
            <el-button type="primary" @click="personDialog = false">确 定</el-button>
             </span>
        </el-dialog>

        <el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%">
            <img :src="picPreviewPath" alt="" class="previewImg">
        </el-dialog>

    </el-container>

</template>

<script>
    export default {
        data() {
            return {
                menuList: [],
                //字体图标
                iconsObj: {
                    '125': 'iconfont icon-user',
                    '103': 'iconfont icon-tijikongjian',
                    '101': 'iconfont icon-shangpin',
                    '102': 'iconfont icon-danju',
                    '145': 'iconfont icon-baobiao',
                    '162': 'iconfont iconborder-bottom',
                    '167': 'iconfont iconpaper-plane',
                    '170': 'iconfont iconcog-fill',
                    '164': 'iconfont iconbug-report',
                    '172': 'iconfont iconmap-fill'
                },
                isCollapse: false,
                showIndex: true,
                dialogVisible: false,
                personDialog: false,
                color: '#373d41',
                // 图片预览对话框
                previewDialogVisible: false,
                picPreviewPath: '',
                // 图片上传地址
                uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
                // 处理图片预览
                handlePreview(file) {
                    this.picPreviewPath = file.response.data.url
                    this.previewDialogVisible = true
                },
                // 处理移除图片的操作
                handleRemove(file) {
                    // 1.获取将要删除图片的临时路径
                    const filePath = file.response.data.tmp_path
                    // 2.从pics数组中，找到图片对应的索引值
                    const i = this.addForm.pics.findIndex(x => x.pic === filePath)
                    // 3.调用splice方法，移除图片信息
                    this.addForm.splice(i, 1)
                },
                // 图片上传组件的请求对象
                headerObj: {
                    Authorization: window.sessionStorage.getItem('token')
                },
                // 监听图片上传成功事件
                handleSuccess(response) {
                    // 1.拼接得到一个图片信息对象 临时路径
                    const picInfo = {pic: response.data.tmp_path}
                    // 2.将图片信息对象，push到pics数组中
                    this.addForm.pics.push(picInfo)
                },
            }
        },
        name: "Home",
        created() {
            this.getMenuList()
        },
        methods: {
            //退出
            logout() {
                window.sessionStorage.clear();
                this.$router.push("/login");
                this.$message.success("退出成功")
            },
            goHome() {
                this.$router.push('/home');
            },
            //获取菜单列表
            async getMenuList() {
                await this.axios({
                    method: 'GET',
                    url: 'menus'
                }).then((res) => {
                    if (res.status == 200) {
                        this.menuList = res.data.data;
                    } else {
                        this.$message.error("获取菜单列表数据异常")
                    }
                });
            },
            //折叠
            toggleCollapse() {
                this.isCollapse = !this.isCollapse
                this.showIndex = !this.showIndex

            }
        }
    }
</script>

<style lang="less" scoped>

    .home_container {
        height: 100%;
    }

    .el-header {
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #fff;
        font-size: 20px;

        > div {
            display: flex;
            align-items: center;

            span {
                margin-left: 15px;
            }
        }

    }

    .el-aside {
        background-color: #333744;

        .el-menu {
            border-right: none;
        }
    }

    .el-main {
        background-color: #eaedf1;
    }

    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #eee;
    }

    .iconfont {
        margin-right: 10px;
    }

    .toggle-button {
        background-color: #4A5064;
        font-size: 10px;
        color: #fff;
        line-height: 24px;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
    .previewImg{
        width: 100%;
    }
</style>
